<template>
  <div>
    <div class="outer">
      <!-- 注册 -->
      <div class="register-wrap">
        <div class="register">
          <div class="registerform">
            <ul class="tab clearFix">
              <li>
                <a href="##" style="font-weight: 700; margin-left: 5px"
                  >会员注册</a
                >
              </li>
              <li>
                <router-link to="/login" class="current">
                  <span style="color: #333; fontweight: 600">已注册可</span>
                  直接登录
                </router-link>
              </li>
            </ul>
            <hr />

            <div class="content">
              <form action="##" class="form">
                <div class="input-text clearFix">
                  <i></i>
                  <input
                    type="text"
                    placeholder="请输入手机号"
                    id="phone"
                    name="phone"
                  />
                  <!-- <span class="error-msg msg1"
                  >必须输入11位数字</span
                > -->
                </div>

                <div class="input-text clearFix">
                  <i class="pwd"></i>
                  <input
                    type="text"
                    placeholder="输入8-20位的数字、字母和符号"
                    id="password"
                    name="password"
                  />
                  <!-- <span class="error-msg" v-show="HiddenPassword"
                  >密码不符合规定</span
                > -->
                </div>

                <div class="input-text clearFix">
                  <i class="pwd"></i>
                  <input
                    type="text"
                    placeholder="请在次输入密码"
                    id="rePassword"
                    name="rePassword"
                  />
                  <!-- <span class="error-msg"
                  >密码不正确</span
                > -->
                </div>

                <div>
                  <input type="checkbox" />
                  <span>
                    我已阅读并接受以下条款：
                    <a href="#">《唯品会服务条款》</a>
                    <a href="#">《唯品会隐私政策》</a>
                    <a href="#">《唯品支付用户服务协议》</a>
                  </span>
                  <!-- <div v-show="false" style="color:red;" class="error" 
                  >请同意条款</div
                > -->
                </div>
                <div class="setting clearFix">
                  <button class="btn">立即注册</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Register",
};
</script>
<script></script>

<style lang="less" scoped>
.outer {
  .bottom {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 10px;
    .logoLeft {
      float: left;
    }

    .logoRight {
      float: right;
      margin-top: 35px;
    }
  }

  .register-wrap {
    height: 600px;
    background-color: rgb(250, 168, 172);

    .register {
      width: 1200px;
      height: 600px;
      margin: 0 auto;
      background: url(https://b.appsimg.com/upload/momin/2020/12/14/15/1607915393371.jpg)
        no-repeat;
      background-position: center;
      .registerform {
        width: 360px;
        height: 450px;
        box-sizing: border-box;
        background: #fff;
        float: right;
        top: 60px;
        right: 80px;
        position: relative;
        .tab {
          overflow: hidden;
          // padding-right: 30px;
          padding: 10px 10px 0 20px;
          border-bottom: 1px solid #ccc;
          li {
            width: 50%;
            float: left;
            text-align: start;
            list-style-type: none;
            a {
              width: 100%;
              display: block;
              height: 50px;
              line-height: 50px;
              font-size: 18px;
              // font-weight: 700;
              color: #666;
              border: none;
              box-sizing: border-box;
              text-decoration: none;
            }
            .current {
              border-bottom: none;
              border-top-color: #28a3ef;
              color: #f10180;
              font-size: 14px;
              margin-left: 35px;
            }
          }
        }
        .content {
          width: 360px;
          height: 350px;
          box-sizing: border-box;
          // border: 1px solid #ddd;
          border-top: none;
          padding: 0 20px;
          overflow: hidden;
          .form {
            margin: 20px 0 18px 0;
            font-size: 12px;
            line-height: 18px;
            .input-text {
              margin-bottom: 30px;
              position: relative;
              // overflow: hidden;
              i {
                float: left;
                width: 30px;
                height: 32px;
                border: 1px solid #ccc;
                border-right: none;
                background: url(./images/icons.png) no-repeat -10px -201px;
                box-sizing: border-box;
                border-radius: 2px 0 0 2px;
              }
              .pwd {
                background: url(./images/icons.png) no-repeat -72px -201px;
              }
              input {
                width: 290px;
                height: 32px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-left: none;
                float: left;
                padding-top: 6px;
                padding-bottom: 6px;
                font-size: 14px;
                line-height: 22px;
                padding-right: 8px;
                padding-left: 8px;
                border-radius: 0 2px 2px 0;
                outline: none;
              }
              .error-msg {
                position: absolute;
                top: 100%;
                left: 40px;
                color: red;
              }
            }
            .setting {
              .btn {
                background-color: rgb(241, 1, 128);
                padding: 6px;
                border-radius: 0;
                font-size: 16px;
                font-family: 微软雅黑;
                word-spacing: 4px;
                border: 1px solid #e1251b;
                color: #fff;
                width: 100%;
                height: 36px;
                margin-top: 40px;
                outline: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
